<script lang="ts" setup>
/**
 * axios axios 配置
 * myMixin 页面公共方法
 */
let axios: any = inject('$axios');
const router = useRouter();
import {
  getCustomLocalStorage,
  setCustomLocalStorage,
  removeLocalStorage,
} from '@/utils/localStorage';
import { json } from 'stream/consumers';

/**
 * 订单类型切换
 * FollowForm
 * tabbnt 订单类型选择
 *
 */
const FollowForm = ref([
  {
    title: 'VIP订单',
    value: '2',
  },
  {
    title: '普通订单',
    value: '1',
  },
]);
const iValue = ref('2');
const tabBtn = (item) => {
  iValue.value = item.value;
  init(2);
  numberOf.value = JSON.parse(JSON.stringify(initNumberOf));
  searchsOptions.value = JSON.parse(JSON.stringify(initSearchsOptions));
  searchRef.value.handelReset;
  needValue.value = '1';
  if (iValue.value == '2') {
    todayArr.value = resoultBeforeNumDate(4);
    searchsOptions.value.push({
      label: '发布方式',
      value: '',
      key: 'type',
      placeholder: '请选择发布方式',
      size: 3,
      options: [
        {
          value: '1',
          label: '快捷',
        },
        {
          value: '2',
          label: '方便',
        },
      ],
      type: 'select',
    });
  } else {
    numberOf.value['work_order'] = {
      name: '工单申请（条）',
      num: '0',
    };
    searchsOptions.value.splice(4, 1);
    todayArr.value = resoultBeforeNumDate(3);
    todayArr.value[3].name = '超时订单';
    tableRef.value.moveDoLayout();
  }
  columnsActive.value = item.value;
  todayArr.value[0].name = '今天';
  aValue.value = todayArr.value[0].value;
};

/**
 * 任务列表的数据统计
 * numberOf 信息条数展示
 */
const initNumberOf = {
  once_sum: {
    name: '总信息（条）',
    num: '0',
  },
  once_handle: {
    name: '处理（条）',
    num: '0',
  },
  once_no_handle: {
    name: '未处理（条）',
    num: '0',
  },
  once_await: {
    name: '超时移交（条）',
    num: '0',
  },
  gone_await: {
    name: '超时回访（条）',
    num: '0',
  },
};
const numberOf = ref();
numberOf.value = JSON.parse(JSON.stringify(initNumberOf));
const getTaskListStaticData = async () => {
  let res = await axios.getTaskListStatic();
  if (res.data.code != 200) return;
  Object.keys(numberOf.value).forEach((key) => {
    numberOf.value[key].num = res.data.data[key];
  });
};

/**
 * 日期选择
 * resoultBeforeNumDate 当前时间以及前number天的时间arr
 * todayBtn
 */
const resoultBeforeNumDate = (num: any) => {
  const date: any = new Date();
  let arr = [];
  for (let j = 0; j <= num; j++) {
    var previousDay = new Date(date - j * 24 * 60 * 60 * 1000); // 每次减去一天的毫秒数
    arr.push({
      name:
        String(previousDay.getMonth() + 1).padStart(2, '0') +
        '.' +
        String(previousDay.getDate()).padStart(2, '0'),
      value: j + 1,
      text:
        String(previousDay.getMonth() + 1).padStart(2, '0') +
        '.' +
        String(previousDay.getDate()).padStart(2, '0'),
    });
  }
  return arr;
};
const aValue: any = ref();
const todayArr = ref([]);
todayArr.value = resoultBeforeNumDate(4);
aValue.value = todayArr.value[0].value;
todayArr.value[0].name = '今天';
const todayBtn = (item) => {
  aValue.value = item.value;
  getTahList();
};

/**
 * 任务类型
 */
const tValue: any = ref();
const taskType = ref([]);
const getTahList = async () => {
  let res = await axios.getTaskTagList({
    day_type: aValue.value,
  });
  taskType.value = res.data.data;
  tValue.value = res.data.data[0].id;
  getTableList(1);
};
const taskBtn = (item) => {
  tValue.value = item.id;
  getTableList(1);
};

/**
 * searchForm 搜索value
 * searchsOptions 搜索配置
 * handelSearch 搜索暴露方法
 */
const searchsOptions = ref();
const initSearchsOptions = [
  {
    label: '信息编号',
    value: '',
    key: 'no',
    placeholder: '请输入信息编号',
    options: [],
    type: 'input',
    size: 3,
  },
  {
    label: '手机号',
    value: '',
    key: 'mobile',
    placeholder: '请输入用户手机号',
    options: [],
    type: 'input',
    size: 3,
  },
  {
    label: '微信号',
    value: '',
    key: 'number',
    placeholder: '请输入用户微信号',
    options: [],
    type: 'input',
    size: 3,
  },
  {
    label: '发布地区',
    value: '',
    key: 'areaDate',
    placeholder: '请选择',
    options: [],
    type: 'city',
    size: 3,
  },
];
const searchRef = ref(null);
searchsOptions.value = JSON.parse(JSON.stringify(initSearchsOptions));
searchsOptions.value.push({
  label: '发布方式',
  value: '',
  key: 'content_vip',
  placeholder: '请选择',
  size: 3,
  options: [
    {
      value: '1',
      label: '快捷',
    },
    {
      value: '2',
      label: '标准',
    },
  ],
  type: 'select',
});
const searchForm = ref();
const handelSearch = (params) => {
  searchForm.value = Object.assign(
    {
      no: '', // 信息编号
      mobile: '', // 手机号
      number: '', // 微信号
      areaList: '', // 发布地区
      content_vip: '', // 发布方式
    },
    params,
  );
  // 省市区数据
  if (params.areaDate.length) {
    searchForm.value.area = params.areaDate[0];
    searchForm.value.city = params.areaDate[1];
    searchForm.value.address = params.areaDate[2];
    delete searchForm.value.areaDate;
  }
  getTableList(1);
};

/**
 * 上午下午待办
 * needValue 选中value
 */
const needValue: any = ref();
const needTo = ref([
  {
    name: '上午待办',
    num: '1',
  },
  {
    name: '下午待办',
    num: '2',
  },
]);
needValue.value = needTo.value[0].num;
const needBtn = (item) => {
  needValue.value = item.num;
  getTableList(1);
};

/**
 * 列表表格：
 * tableOptions 表格组件配置
 * columns 表格columns配置
 * tableData 表格数据参数
 * loadingTable 加载表格数据loading
 * getTableList 获取表格数据方法
 * handlePaginationChange 切换currentPage或切换pageSize
 */
const tableOptions = reactive({
  showPagination: true,
  defaultSort: { prop: 'plain_end_time', order: 'descending' },
  paginationConfig: {
    total: 10,
    currentPage: 1,
    pageSize: 10,
  },
});
const tableRef = ref();
const columnsVip = ref([
  { prop: 'no', label: '信息编号', align: 'center', width: '180' },
  {
    prop: 'cat_1_msg',
    label: '行业',
    align: 'center',
  },
  {
    label: '信息类型',
    align: 'center',
    render: ({ row }) => {
      return h('span', row.style == 1 ? '普通信息' : 'VIP信息');
    },
  },
  {
    label: '发布方式',
    align: 'center',
    render: ({ row }) => {
      return h('span', row.content_vip ? '快捷' : '标准');
    },
  },
  {
    label: '付费订单',
    align: 'center',
    render: ({ row }) => {
      return h('span', row.is_pay == 1 ? '是' : '否');
    },
  },
  {
    prop: 'pay_num', label: '付款金额', align: 'center', width: '100',
    render: ({ row }) => {
      return h('span', (Number(row.pay_num) / 100).toFixed(2));
    },
  },
  {
    label: '用户',
    width: '150',
    align: 'center',
    render: ({ row }) => {
      if (!row.nickname && !row.number) {
        return h(ElLink, { type: 'primary' }, '催促');
      }
      return h(
        'div',
        {
          style: {
            height: '100%',
            width: '90%',
            margin: '0 auto',
            'text-align': 'left',
          },
        },
        [
          h(
            'p',
            {
              style: {
                'line-height': '15px',
                'margin-bottom': '3px',
              },
            },
            '微信昵称：' + row.nickname || '',
          ),
          h(
            'p',
            { style: { 'line-height': '15px' } },
            `微信号：${row.number ? row.number : ''}`,
          ),
        ],
      );
    },
  },
  {
    prop: 'plain_end_time',
    label: '计划结束时间',
    type: 'date',
    align: 'center',
    sortable: 'true',
    width: '180',
  },
  {
    label: '信息状态',
    align: 'center',
    width: '100',
    render: ({ row }) => {
      if (row.status == undefined) return;
      let obj = {
        0: {
          title: '支付中',
          type: 'primary',
        },
        1: {
          title: '待移交',
          type: 'primary',
        },
        2: {
          title: '已取消',
          type: 'danger',
        },
        3: {
          title: '已删除',
          type: 'danger',
        },
        4: {
          title: '已驳回',
          type: 'danger',
        },
        5: {
          title: '已通过',
          type: 'success',
        },
        6: {
          title: '已移交',
          type: 'success',
        },
        7: {
          title: 'vip待创建',
          type: 'warning',
        },
        8: {
          title: '超时',
          type: 'warning',
        },
      };
      if (!obj[row.status]) return
      return h(
        ElTag,
        { effect: 'dark', type: obj[row.status].type },
        obj[row.status].title,
      );
    },
  },
  { prop: 'created_at', label: '创建时间', align: 'center', width: '170' },
  {
    prop: 'op_time',
    label: '操作时间',
    type: 'date',
    align: 'center',
    width: '170',
  },
  {
    label: '操作',
    align: 'center',
    width: '300',
    render: ({ row }) => {
      let arr = [
        {
          name: '移交',
          type: 'primary',
          icon: '',
          command: handelTransfer,
        },
        {
          name: '转移',
          type: 'primary',
          icon: '',
          command: handelDivert,
        },
        {
          name: '查看',
          type: 'primary',
          icon: '',
          command: handelWatch,
        },
        {
          name: '取消',
          type: 'primary',
          icon: '',
          command: handelCancel,
        },
        {
          name: '匹配',
          type: 'primary',
          command: handleTaskMate,
        },
        {
          name: '贡献',
          type: 'primary',
          command: handelContribute,
        },
        {
          name: '引流',
          type: 'primary',
          icon: '',
          command: handelDrainage,
        },
      ];
      let showButton = arr.map((item) => {
        return h(
          ElButton,
          {
            type: item.type,
            icon: item.icon,
            text: true,
            style: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'start',
              height: '25px',
              width: '50%',
              margin: '0  5px',
              padding: 0,
            },
            onClick: () => item.command(row),
          },
          item.name,
        );
      });
      return h(
        'div',
        {
          style: {
            textAlign: 'center',
            width: '35%',
            height: '100%',
            margin: '0 auto',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          },
        },
        showButton,
      );
    },
  },
]);
const columnsNormal = ref([
  { prop: 'no', label: '信息编号', align: 'center', width: '180' },
  {
    prop: 'cat_1_msg',
    label: '行业',
    align: 'center',
  },
  {
    label: '信息类型',
    align: 'center',
    render: ({ row }) => {
      return h('span', row.style == 1 ? '普通信息' : 'VIP信息');
    },
  },
  {
    label: '付费订单',
    align: 'center',
    render: ({ row }) => {
      return h('span', row.is_pay == 1 ? '是' : '否');
    },
  },
  {
    prop: 'pay_num', label: '付款金额', align: 'center', width: '100',
    render: ({ row }) => {
      return h('span', (Number(row.pay_num) / 100).toFixed(2));
    },
  },
  {
    label: '用户',
    width: '150',
    align: 'center',
    render: ({ row }) => {
      if (!row.nickname && !row.number) {
        return h(ElLink, { type: 'primary' }, '催促');
      }
      return h(
        'div',
        {
          style: {
            height: '100%',
            width: '90%',
            margin: '0 auto',
            'text-align': 'left',
          },
        },
        [
          h(
            'p',
            {
              style: {
                'line-height': '15px',
                'margin-bottom': '3px',
              },
            },
            '微信昵称：' + row.nickname || '',
          ),
          h(
            'p',
            { style: { 'line-height': '15px' } },
            `微信号：${row.number ? row.number : ''}`,
          ),
        ],
      );
    },
  },
  {
    prop: 'plain_end_time',
    label: '计划结束时间',
    align: 'center',
    sortable: 'true',
    type: 'date',
    width: '170',
  },
  {
    label: '信息状态',
    align: 'center',
    width: '120',
    render: ({ row }) => {
      if (row.status == undefined) return;
      let obj = {
        0: {
          title: '支付中',
          type: 'primary',
        },
        1: {
          title: '待移交',
          type: 'primary',
        },
        2: {
          title: '已取消',
          type: 'danger',
        },
        3: {
          title: '已删除',
          type: 'danger',
        },
        4: {
          title: '已驳回',
          type: 'danger',
        },
        5: {
          title: '已通过',
          type: 'success',
        },
        6: {
          title: '已移交',
          type: 'success',
        },
        7: {
          title: 'vip待创建',
          type: 'warning',
        },
        8: {
          title: '超时',
          type: 'warning',
        },
      };
      if (!obj[row.status]) return
      return h(
        ElTag,
        { effect: 'dark', type: obj[row.status].type },
        obj[row.status].title,
      );
    },
  },
  { prop: 'created_at', label: '创建时间', align: 'center', width: '170' },
  {
    prop: 'op_time',
    label: '操作时间',
    type: 'date',
    width: '170',
    align: 'center',
  },
  {
    label: '操作',
    width: '300',
    align: 'center',
    render: ({ row }) => {
      let arr = [
        {
          name: '移交',
          type: 'primary',
          icon: '',
          command: handelTransfer,
        },
        {
          name: '转移',
          type: 'primary',
          icon: '',
          command: handelDivert,
        },
        {
          name: '查看',
          type: 'primary',
          icon: '',
          command: handelWatch,
        },
        {
          name: '取消',
          type: 'primary',
          icon: '',
          command: handelCancel,
        },
        {
          name: '匹配',
          type: 'primary',
          command: handleTaskMate,
        },
        {
          name: '贡献',
          type: 'primary',
          command: handelContribute,
        },
        {
          name: '引流',
          type: 'primary',
          icon: '',
          command: handelDrainage,
        },
      ];
      let showButton = arr.map((item) => {
        return h(
          ElButton,
          {
            type: item.type,
            icon: item.icon,
            text: true,
            style: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'start',
              height: '25px',
              width: '50%',
              margin: '0  5px',
              padding: 0,
            },
            onClick: () => item.command(row),
          },
          item.name,
        );
      });
      return h(
        'div',
        {
          style: {
            textAlign: 'center',
            width: '35%',
            height: '100%',
            margin: '0 auto',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          },
        },
        showButton,
      );
    },
  },
]);
const columnsActive: any = ref('2');
const tableData = ref([]);
const loadingTable = ref(false);
const shangWu = ref(1);
const xiaWu = ref(2);
const getTableList = async (page?: any) => {
  loadingTable.value = true;
  // 请求上午总数
  let paramsShang = Object.assign(
    {
      page: page ? page : tableOptions.paginationConfig.currentPage,
      limit: tableOptions.paginationConfig.pageSize,
      style: iValue.value, // 1 普通 2 vip
      day_type: aValue.value, // 选择日期
      cat_1: tValue.value, // 类型
      time_type: 1, // 1 上午 2 下午
      is_order_plain_end_time: tableSort.value, // 排序
    },
    searchForm.value,
  );
  let resShangWu = await axios.getTaskList(paramsShang);
  shangWu.value = resShangWu.data.data.pageData.handle_count;
  // 请求下午总数
  let paramsXia = Object.assign(
    {
      page: page ? page : tableOptions.paginationConfig.currentPage,
      limit: tableOptions.paginationConfig.pageSize,
      style: iValue.value, // 1 普通 2 vip
      day_type: aValue.value, // 选择日期
      cat_1: tValue.value, // 类型
      time_type: 2, // 1 上午 2 下午
      is_order_plain_end_time: tableSort.value, // 排序
    },
    searchForm.value,
  );
  let resXiaWu = await axios.getTaskList(paramsXia);
  xiaWu.value = resXiaWu.data.data.pageData.handle_count;

  loadingTable.value = false;
  let res = needValue.value == 1 ? resShangWu : resXiaWu;
  tableData.value = res.data.data.list;
  tableOptions.paginationConfig = {
    total: Number(res.data.data.pageData.count),
    currentPage: Number(res.data.data.pageData.page),
    pageSize: 10,
  };
};
const handlePaginationChange = (currentPage, pageSize) => {
  tableOptions.paginationConfig.currentPage = currentPage;
  tableOptions.paginationConfig.pageSize = pageSize;
  getTableList();
};
const tableSort = ref(2);
const handleSortChange = (column, prop, order) => {
  if (order == 'ascending') {
    tableSort.value = 1;
  } else if (order == 'descending') {
    tableSort.value = 2;
  }
  getTableList();
};

/**
 * table操作方法
 * handelTransfer 移交
 * handelDivert 转移
 * handelWatch 查看
 * handelCancel 取消
 * handleTaskMate 匹配
 * handelContribute 贡献
 * handelDrainage 引流
 */
const handelTransfer = (row) => {
  ElMessageBox.confirm('您确认将该信息移交至发布人员吗？', '移交确认', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    beforeClose: async (action, instance, done) => {
      if (action == 'confirm') {
        // 点击确认请求接口;
        let res: any = await axios.getTaskHandle({
          id: row.id,
          style: 6,
        });
        if (res.data.code != 200) return;
        ElMessage({ type: 'success', message: `操作成功` });
        done();
        getTableList();
      } else {
        //点击取消关闭
        done();
      }
    },
  });
};
const handelDivert = (row) => {
  ElMessageBox.confirm('您确认将该信息转移吗？', '转移确认', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    beforeClose: async (action, instance, done) => {
      if (action == 'confirm') {
        // 点击确认请求接口;
        let res: any = await axios.getTaskHandle({
          id: row.id,
          style: 999,
        });
        if (res.data.code != 200) return;
        ElMessage({ type: 'success', message: `操作成功` });
        done();
        getTableList();
      } else {
        //点击取消关闭
        done();
      }
    },
  });
};
const handelWatch = (row) => {
  let params = {
    style: iValue.value, // 1 普通 2 vip
    day_type: aValue.value, // 选择日期
    cat_1: tValue.value, // 类型
    time_type: needValue.value, // 1 上午 2 下午
  };
  setCustomLocalStorage('backTaskParams', JSON.stringify(params));
  let obj = JSON.parse(JSON.stringify(row));
  router.push({
    name: 'taskDetail',
    state: {
      obj,
    },
  });
};
const handelCancel = (row) => {
  ElMessageBox.confirm('您确认将该信息取消吗？', '取消确认', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    beforeClose: async (action, instance, done) => {
      if (action == 'confirm') {
        //点击确认请求接口
        let res: any = await axios.getTaskHandle({
          id: row.id,
          style: 2,
        });
        if (res.data.code != 200) return;
        ElMessage({ type: 'success', message: `操作成功` });
        done();
        getTableList();
        done();
        getTableList();
      } else {
        //点击取消关闭
        done();
      }
    },
  });
};
const handleTaskMate = (row) => {
  let params = {
    style: iValue.value, // 1 普通 2 vip
    day_type: aValue.value, // 选择日期
    cat_1: tValue.value, // 类型
    time_type: needValue.value, // 1 上午 2 下午
  };
  setCustomLocalStorage('backTaskParams', JSON.stringify(params));
  router.push({
    path: '/home/task/taskMate',
    query: {
      task_id: row.id,
    },
  });
};

/**
 * 引流、贡献海报
 *  handelContribute
 */
const dialogContributeOpitons = reactive({
  dialogShow: false,
  title: '生成海报',
  width: '50%',
  footButtonList: {
    cancel: {
      type: 'cancel',
      buttonType: 'default',
      btnText: '关 闭',
      btnLoading: false,
      btnLoadingText: '',
    },
  },
});
const contributeImg = ref();
const handelContribute = async (row) => {
  let res = await axios.getCreateShareImage({
    id: row.id,
    type: 1,
  });
  contributeImg.value = `http://${res.data.data.url}`;
  dialogContributeOpitons.dialogShow = true;
};
const handelDrainage = async (row) => {
  let res = await axios.getCreateShareImage({
    id: row.id,
    type: 2,
  });
  contributeImg.value = `http://${res.data.data.url}`;
  dialogContributeOpitons.dialogShow = true;
};
const handelDialogContributeButton = () => {
  dialogContributeOpitons.dialogShow = false;
};

/**
 * init 初始化方法入口
 */
const areaOptions = ref();
const init = async (type) => {
  // 地区数据
  let cityDate = await axios.getCityChina({
    is_tree: 1,
  });
  areaOptions.value = cityDate.data.data;
  searchRef.value.handelSetOptions(cityDate.data.data, 3);
  getTaskListStaticData();
  // 判断是否有之前需要回显条件
  if (type == 1 && getCustomLocalStorage('backTaskParams')) {
    // 类型
    iValue.value = JSON.parse(getCustomLocalStorage('backTaskParams')).style;
    // 日期
    if (JSON.parse(getCustomLocalStorage('backTaskParams')).style == 2) {
      todayArr.value = resoultBeforeNumDate(4);
    } else {
      todayArr.value = resoultBeforeNumDate(3);
      todayArr.value[3].name = '超时订单';
    }
    todayArr.value[0].name = '今天';
    aValue.value = JSON.parse(getCustomLocalStorage('backTaskParams')).day_type;
    // 标签类型
    let res = await axios.getTaskTagList({
      day_type: aValue.value,
    });
    taskType.value = res.data.data;
    tValue.value = JSON.parse(getCustomLocalStorage('backTaskParams')).cat_1;
    // 上午下午
    needValue.value = JSON.parse(
      getCustomLocalStorage('backTaskParams'),
    ).time_type;
    getTableList(1);
    removeLocalStorage('backTaskParams');
  } else {
    getTahList();
  }
};
init(1);
</script>
<template>
  <div class="task">
    <!-- tab切换 -->
    <div class="followtab padding-20">
      <div class="followup">
        <div class="tabbtn" v-for="(item, index) in FollowForm" :key="index" :style="iValue == item.value
          ? 'background:rgb(24, 145, 255);color:#fff;border:none;'
          : ''
          ">
          <span @click="tabBtn(item)">{{ item.title }}</span>
        </div>
      </div>

      <!-- 信息 -->
      <div class="numberof" v-for="(itemNum, indexNum) in numberOf" :key="indexNum">
        <span>{{ itemNum.name }}</span>
        <p>
          <span>
            {{
          Number(itemNum.num) >= 10000 ? itemNum.num / 10000 : itemNum.num
        }}
          </span>
          <span v-if="Number(itemNum.num) >= 10000">万</span>
        </p>
      </div>
    </div>
    <!-- 信息 -->

    <!-- 日期选择 -->
    <div class="todaymonday" :style="{ marginBottom: iValue == '1' ? '20px' : '' }">
      <div class="todaydate" v-for="(itemDay, indexDay) in todayArr" :key="indexDay"
        :class="aValue == itemDay.value ? 'dateactive' : ''" @click="todayBtn(itemDay)">
        <p>{{ itemDay.name }}</p>
      </div>
    </div>
    <!-- 任务类型 -->
    <div class="tasktype">
      <div class="taskdata" v-for="(itemTask, indexTask) in taskType" :key="indexTask"
        :class="tValue == itemTask.id ? 'taskActive' : ''">
        <p @click="taskBtn(itemTask)">
          {{ itemTask.name }}
          <span>({{ itemTask.num }})</span>
        </p>
      </div>
    </div>
    <div class="tasktable">
      <!-- 搜索 、表格数据 -->
      <pagesLayout pagesType="alone">
        <template #center>
          <div class="pageslayout">
            <!-- 搜索 -->
            <div class="pageslayoutHeader">
              <SearchItem :searchOptions="searchsOptions" @handelSearch="handelSearch" ref="searchRef"></SearchItem>
            </div>
            <div class="management">
              <div class="dealtwith">
                <p v-for="(itemNeed, indexNeed) in needTo" :key="indexNeed" @click="needBtn(itemNeed)"
                  :class="needValue == itemNeed.num ? 'needColor' : ''">
                  <span>{{ itemNeed.name }}</span>
                  <span style="padding: 10px">
                    {{
          itemNeed.num == 1
            ? shangWu >= 100
              ? '99+'
              : shangWu
            : xiaWu >= 100
              ? '99+'
              : xiaWu
        }}
                  </span>
                </p>
              </div>
              <!-- 、表格数据 -->
              <div class="pageslayoutContaint" element-loading-text="加载中..." v-loading="loadingTable">
                <Table :columns="columnsNormal" v-if="columnsActive == 1" :table-data="tableData"
                  :options="tableOptions" style="height: 660px" ref="tableRef" @sort-change="handleSortChange"
                  @handel-pagination-change="handlePaginationChange"></Table>
                <Table :columns="columnsVip" v-else-if="columnsActive == 2" :table-data="tableData"
                  :options="tableOptions" style="height: 660px" ref="tableRef" @sort-change="handleSortChange"
                  @handel-pagination-change="handlePaginationChange"></Table>
              </div>
            </div>
          </div>
        </template>
      </pagesLayout>
    </div>
    <!-- 贡献、引流海报 弹窗 -->
    <Dialog :dialog-object="dialogContributeOpitons" @handelDialogButton="handelDialogContributeButton">
      <template v-slot:dialogContaint>
        <div style="width: 100%; overflow-y: scroll">
          <el-image style="width: 100%; object-fit: contain" :src="contributeImg" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" :preview-src-list="[contributeImg]" :initial-index="4" fit="cover" />
        </div>
      </template>
    </Dialog>
  </div>
</template>
<style scoped lang="scss">
.task {
  height: 100%;
  overflow-y: scroll;

  .followtab {
    display: flex;
    justify-content: space-between;

    .followup {
      width: 900px;
      height: 50px;
      display: flex;
      align-items: center;
      color: #222;

      >div:nth-child(1) {
        border-radius: 5px 0 0 5px;
        border-right: none;
      }

      >div:nth-child(2) {
        border-radius: 0 5px 5px 0;
        border-left: none;
      }

      .tabbtn {
        height: 31px;
        width: 100px;
        border: 1px solid #cccccc;
        font-size: 14px;
        cursor: pointer;

        >span {
          height: 100%;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .numberof {
    display: flex;
    // flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    >span {
      color: #969799;
      // padding-left: 50px;

      font-size: 14px;
    }

    >p {
      color: #636363;
      // line-height: 20px;
    }
  }

  // .information {
  //   height: 120px;
  //   border: 1px solid #dedede;
  //   box-shadow: 0 2px 4px rgba(190, 191, 194, 0.2);
  //   border-radius: 8px;
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-around;

  // }

  .todaymonday {
    width: calc(100% - 40px);
    display: flex;
    align-items: center;
    // justify-content: space-between;
    // margin: 20px 0 0 0;
    padding: 0 10px;

    .todaydates {
      width: calc(100% / 4);
    }

    .todaydates,
    .todaydate {
      border-radius: 5px;
      font-size: 14px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin-left: 10px;
    }

    .todaydate {
      width: calc(100% / 5.1);
      background-color: #d8d8d8;
      color: #333333;
    }

    .dateactive {
      background: rgb(24, 145, 255);
      color: #fff;

      >p {
        font-weight: bold !important;
      }
    }
  }

  .tasktype {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

    .taskdata {
      display: inline-block;
      width: 140px;
      text-align: center;
      line-height: 60px;
      cursor: pointer;
      margin-right: 10px;
      color: #626271;
      font-size: 14px;
    }

    >div:last-child {
      margin-right: 0;
    }

    .taskActive {
      color: rgb(24, 145, 255);
      border-bottom: 4px solid rgb(24, 145, 255);
    }
  }

  .tasktable {
    margin-top: -1px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    padding: 30px 10px 20px 0;

    .pageslayoutHeader {
      margin-left: 20px;
    }

    .management {
      display: flex;

      .dealtwith {
        >p {
          cursor: pointer;
          background-color: #ededed;
          height: 350px;
          width: 60px;
          margin: 0 15px 0 -1px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          >span:nth-child(1) {
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 7px;
          }

          >span:nth-child(2) {
            width: 30px;
            height: 30px;
            display: flex;
            font-size: 13px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: #c60014;
            color: #fff;
            margin-top: 10px;
          }
        }

        >p:nth-child(1) {
          border-radius: 3px 0 0 0;
        }

        .needColor {
          width: 60px;
          background-color: rgb(51, 137, 255);
          color: #fff;
        }
      }
    }
  }
}

.el-form-item {
  .el-input {
    width: 100px;
  }
}
</style>
